<script setup>
import EditCamera from "../../addCameras/EditCamera.vue";
import EditModal from './EditModal.vue'
import {FwbButton, FwbInput} from "flowbite-vue";
import SvgIcon from "@/components/SvgIcon.vue";
import {reactive, ref,onMounted,nextTick} from "vue";
import CopyModal from "@/pages/Cameras/copyModal/index.vue";

const isShowModal = ref(false);
const selectCopyRef=ref(null)
const urls = reactive({
  stream: "https://polytronone.com/738492",
  live3d: "https://polytronone.com/430-2d"
});
const paramInfo = ref([
  {
    id: 1,
    title: "Camera Info",
    info: [
      {key: "Brand", value: "Huawei"},
      {key: "Transfer Protocol", value: "DX-230"},
      {key: "Serial", value: "TCP"},
      {key: "Port", value: "80"}
    ]
  },
  {
    id: 2,
    title: "Network Settings",
    info: [
      {key: "IP address", value: "192.168.1.100"},
      {key: "Subnet Mask", value: "255.255.255.0"},
      {key: "Gateway", value: "192.168.1.1"}
    ]
  },
  {
    id: 3,
    title: "Mainstream",
    info: [
      {key: "Encoder", value: "H264"},
      {key: "Frame Rate", value: "30 fps"},
      {key: "Bit Rate", value: "4mps"},
      {key: "Resolution", value: "720 x 240"}
    ]
  },
  {
    id: 4,
    title: "Substream",
    info: [
      {key: "Encoder", value: "H264"},
      {key: "Frame Rate", value: "30 fps"},
      {key: "Bit Rate", value: "4mps"},
      {key: "Resolution", value: "720 x 240"}
    ]
  }
]);
onMounted(() => {
  nextTick(() => {
    document.addEventListener("mouseup", e => {
      if (selectCopyRef.value) {
        if (!selectCopyRef.value.contains(e.target)) {
          isCopyCamerShow.value = false;
        }
      }
    });
  });
})

const close = (val) => {
  isShowModal.value = val
}
const EditRef = ref(null)
const isEditModal = () => {
  EditRef.value.showModal()
}
const isCopyCamerShow = ref(false);
const CopyRef = ref(false);
const isCopyModal = () => {
  CopyRef.value.showModal()
  isCopyCamerShow.value = false
}
</script>

<template>
  <div class="w-full h-[73vh] flex flex-row justify-between items-start s2k:h-[70vh] s4k:h-[70vh]" >
    <div class="flex-[2.2] w-full h-full flex">
      <div
        class=" w-[88%] h-[87%] m-auto themeBgColor rounded-[8px] px-[24px] pt-[24px] pb-[24px] s2k:rounded-[10.6px] s2k:px-[32px] s2k:py-[42px] s4k:rounded-[16px] s4k:px-[48px] s4k:py-[64px] s4k:mt-[50px]"
      >
        <div class="w-full h-[47px] flex flex-row justify-between s2k:h-[62px] s4k:h-[94px]">
          <div>
            <p class="text-[1.3rem] font-[400] font-Medium mb-[3px]">Camera 001</p>
            <p class="text-[1.16rem] font-[400] font-Medium text-[#9CA3AF]">Level 1</p>
          </div>
          <div class="flex flex-row items-center">
            <div class="w-[67px] h-[41px] mr-[8px] s4k:w-[134px] s4k:h-[82px] s4k:mr-[16px] s2k:w-[89.3px] s2k:h-[54.6px] 2k:mr-[10.6px]">
              <div
                class="w-full h-full flex flex-row justify-center items-center bg-[var(--theme-button-bg)] cursor-pointer rounded-md s4k:rounded-[12px] s2k:rounded-[8px]"
                @click="isShowModal=true"
              >
                <span class="text-[1.13rem] themeFontColor font-Medium font-[400]">Edit</span>
              </div>
            </div>
            <div class="relative w-[116px] h-[41px] s4k:w-[232px] s4k:h-[82px] s2k:w-[154.6px] s2k:h-[54.6px]" @click="isCopyCamerShow = !isCopyCamerShow" ref="selectCopyRef">
              <div
                   class="w-full h-full flex flex-row justify-center items-center bg-[#1C64F2] cursor-pointer rounded-md s4k:rounded-[12px] s2k:rounded-[8px]"
              >
                <span class="text-[1.13rem] text-white font-Medium font-[400] s2k:mr-[5px]">Copy to</span>
                <svg-icon name="down" class="svgLogo s2ksvg s4ksvg" width="25px" height="12.5px"></svg-icon>
              </div>
              <div style="border: solid var(--theme) 1px"
                   id="dropdown"
                   ref="selectCopyRef"
                   :class="['w-[154px] z-10 bg-gray-800 divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 absolute top-[50px] right-0 bd-4b', 's4k:w-[333px] s4k:top-[100px] s4k:rounded-[16px]','s2k:w-[205.3px] s2k:top-[60px] s2k:rounded-[10.6px]']"
                   v-show="isCopyCamerShow"
              >
                <ul class="text-[1.13rem] py-2 list-none bg-[var(--theme)] border border-solid border-[var(--theme-button-bg)] rounded-[8px] s4k:rounded-[16px]" aria-labelledby="dropdownDefaultButton">
                  <li class="py-[3px] m-0 list-none font-normal hover:bg-[var(--theme-hover)] s2k:py-[4px] s4k:py-[6px]" @click="isCopyModal">
                    <a
                      href="javaScript:;"
                      class="text-[var(--theme-font-color)] block px-4 py-2 dark:hover:bg-gray-600 s4k:px-8 s4k:py-4"
                      style="text-decoration: none"
                    >Copy to Cameras</a>
                  </li>
                  <li class="py-[3px] m-0 list-none font-normal hover:bg-[var(--theme-hover)] s2k:py-[4px] s4k:py-[6px]">
                    <a
                      href="javaScript:;"
                      class="text-[var(--theme-font-color)] block px-4 py-2 dark:hover:bg-gray-600 s4k:px-8 s4k:py-4"
                      style="text-decoration: none"
                    >Export file</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div
          class="flex flex-row justify-between items-center w-full h-[78px] mt-[24px] s4k:mt-[64px] s4k:h-[156px] s2k:h-[104.6px] s2k:mt-[42px]"
        >
          <div class="flex-[1]">
            <fwb-input v-model="urls.stream" label="Stream URL" placeholder size="lg" id="urls">
              <template #suffix>
                <div
                  class="w-[85px] h-[40px] bg-[var(--theme-button-bg)] rounded-[8px] flex flex-row justify-center items-center cursor-pointer s4k:rounded-[16px] s4k:w-[170px] s4k:h-[80px] absolute bottom-0 s4k:bottom-[5px] right-0 s2k:w-[113px] s2k:h-[53px] s2k:rounded-[10.6px]"
                >
                  <svg-icon name="copy" class="svgClass s2ksvg s4ksvg" width="16px" height="16px"></svg-icon>
                  <span
                    class="font-Medium font-[400] text-[1.3rem] ml-[5px] s2k:ml-[6.6px] s4k:ml-[15px] leading-[40px] s2k:leading-[60px] s4k:leading-[80px]"
                  >copy</span>
                </div>
              </template>
            </fwb-input>
          </div>
          <div class="flex-[1] ml-[32px] s2k:ml-[42px] s4k:ml-[64px]">
            <fwb-input v-model="urls.live3d" label="3D Live URL" placeholder size="lg" id="urls">
              <template #suffix>
                <div
                  class="w-[85px] h-[40px] bg-[var(--theme-button-bg)] rounded-[8px] flex flex-row justify-center items-center cursor-pointer s4k:rounded-[16px] s4k:w-[170px] s4k:h-[80px] absolute bottom-0 s4k:bottom-[5px] right-0 s2k:w-[113px] s2k:h-[53px] s2k:rounded-[10.6px]"
                >
                  <svg-icon name="copy" class="svgClass s2ksvg s4ksvg" width="16px" height="16px"></svg-icon>
                  <span
                    class="font-Medium font-[400] text-[1.3rem] ml-[5px] s2k:ml-[6.6px] s4k:ml-[15px] leading-[40px] s2k:leading-[60px] s4k:leading-[80px]"
                  >copy</span>
                </div>
              </template>
            </fwb-input>
          </div>
        </div>
        <div
          class="w-full mt-[24px] border-t border-solid border-[var(--grid)] s4k:mt-[64px] s2k:mt-[42.6px]"
          v-for="v in paramInfo"
          :key="v.id"
        >
          <p
            class="text-[1.13rem] text-[#9CA3AF] font-SemiBold font-[400] mt-[12px] s2k:mt-[16px] s4k:mt-[24px]"
          >{{ v.title }}</p>
          <div class="w-full flex flex-wrap mt-[20px] s2k:mt-[26.6px] s4k:mt-[40px]">
            <div class="w-[25%]" v-for="info in v.info" :key="info.key">
              <p
                class="text-[1rem] text-[#9CA3AF] font-Regular font-[400]"
              >{{ info.key }}</p>
              <p
                class="text-[1.3rem] font-[400] font-Regular mt-[3px] s2k:mt-[4px] s4k:mt-[6px]"
              >{{ info.value }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-[1] w-full h-full flex">
      <div class="w-full h-[87%] pr-[24px] pb-[64px] m-auto relative s2k:pr-[32px] s2k:pb-[85px] s4k:pr-[48px] s4k:pb-[128px]">
        <div class="relative">
          <img src="@/assets/image/cover.png" alt class="w-full h-[232px] s2k:h-[309.3px] s4k:h-[464px]"/>
          <div
            class="w-[49px] h-[23px] rounded-[4px] flex bg-black absolute bottom-[10px] left-[8px] opacity-40 s4k:w-[98px] s4k:h-[46px] s4k:rounded-[8px] s4k:left-[16px] s4k:bottom-[20px] s2k:w-[65.3px] s2k:h-[30.6px] s2k:rounded-[5.3px] s2k:bottom-[13.3px] s2k:left-[10.6px]"
          >
            <span class="m-auto font-Bold text-[0.83rem]">Live 3D</span>
          </div>
        </div>
        <div class="w-full flex flex-row justify-between items-center mt-[10px] s2k:mt-[13.3px] s4k:mt-[20px]">
          <span
            class="text-[var(--theme-font-desc-color)] font-Regular text-[1.3rem] font-[400]"
          >Edit Image Settings</span>
          <div class="py-[5px] px-[8px] border border-solid border-[var(--grid)] rounded-[8px] s2k:py-[6.67px] s2k:pr-[10.6px] s2k:pl-[18px] s2k:rounded-[10.6px] s4k:rounded-[16px] s4k:pb-[20px] s4k:pt-[0px] s4k:pr-[21px] s4k:pl-[16px] cursor-pointer">
            <svg-icon name="edit" class="svgEdit s2ksvg s4ksvg" width="20px" height="20px"
                      @click="isEditModal"></svg-icon>
          </div>
        </div>
        <svg-icon
          name="bofang"
          class="absolute top-[8px] left-[8px] s2ksvg s4ksvg s4k:top-[20px] s4k:left-[16px]"
          width="37px"
          height="16px"
        ></svg-icon>
      </div>
    </div>
    <EditCamera v-if="isShowModal" @close="close"/>
    <EditModal ref="EditRef"/>
    <!-- Copy to Cameras -->
    <CopyModal ref="CopyRef"/>
  </div>
</template>
<style scoped lang="scss">
#urls {
  :deep(label) {
    color: #9ca3af;
    font-size: 1rem;
  }

  :focus {
    border: solid var(--grid) 1px;
  }

  :deep(input) {
    padding: 0;
    height: 56px;
    background: var(--theme);
    box-shadow: none;
    font-size: 1.3rem;
    color: #9ca3af;
    padding-left: 12px;
    border: solid var(--grid) 1px;
  }
}

@media screen and (min-width: 2560px) {
  #urls {
    :deep(input) {
      height: 74.6px;
      padding-left: 16px;
    }
  }
  .s2ksvg{
    transform: scale(1.3) !important;
  }
}
@media screen and (min-width: 3840px) {
  #urls {
    :deep(input) {
      height: 112px;
      padding-left: 24px;
    }
  }
  .s4ksvg {
    transform: scale(2) !important;
    margin-left: 15px;
  }
}
</style>